<template>
	<view>
		<view class="card" v-if="detail.status==5 || detail.status==7">
			<view style="font-weight: bold;" v-if="detail.status==5">请对本单服务进行评价</view>
			<view class="horizontal" style="justify-content: flex-start;line-height: 60rpx;align-items: center;">
				<text class="gst">用户评分</text>
				<uni-rate @change="changeRate" v-model="post.star" v-if="detail.status==5"></uni-rate>
				<uni-rate :value="detail.result.star" v-else-if="detail.status==7" readonly disabled></uni-rate>
			</view>
		</view>
		
		<view class="card">
			<view :class="detail.status<=2?'will':(detail.status<=4?'ing':'ed')" style="font-weight: bold;font-size: large;">{{statuses[detail.status] || ''}}</view>
			<view class="splitter" style="margin: 20rpx 0;"></view>
			<view class="gst">工单编号：{{detail.no}}</view>
			<view class="gst">工单类型：{{types[detail.type] || ''}}</view>
			<view class="gst">工单来源：{{sources[detail.source] || ''}}</view>
		</view>
		
		<view class="card" v-if="detail.userVo" style="line-height: 1.5em;">
			<view class="gst">联系人：{{detail.userName || detail.userVo.comapanyName || detail.userVo.name || ''}}</view>
			<view class="gst">联系电话：{{detail.phone || detail.userVo.phone || ''}}</view>
			<view class="gst">客户地址：{{detail.userVo.address | addr}}</view>
		</view>
		
		<view class="card" style="line-break: 1.5em;" v-if="[types['开通'], types['报修']].includes(detail.type)">
			<view class="gst">上门时间：
				<block v-if="detail.visitDate">
					{{detail.visitDate | smartTime("YY/mm/dd")}}&nbsp;{{detail.visitStartTime || ''}}-{{detail.visitEndTime || ''}}
				</block>
				<block v-else>----</block>
			</view>
		</view>
		
		<view class="card" style="line-height: 1.5em;">
			<view class="gst" v-if="detail.applyTime">申请时间：{{detail.applyTime}}</view>
			
			<block v-if="detail.allocate">
				<view class="gst" v-if="detail.allocate.allocateTime">派单时间：{{detail.allocate.allocateTime}}</view>
				<view class="gst" v-if="detail.allocate.acceptTime">接单时间：{{detail.allocate.acceptTime}}</view>
				<view class="gst" v-if="detail.allocate.finishTime">完成时间：{{detail.allocate.finishTime}}</view>
			</block>
		</view>
		
		<view v-if="detail.remark" class="card" style="line-height: 1.5em;">
			<view class="gst">报停原因：{{detail.remark}}</view>
		</view>
		
		<view v-if="detail.hitch" class="card" style="line-height: 1.5em;">
			<view class="gst" v-if="detail.hitch.type">故障类型：{{detail.hitch.type}}</view>
			<view class="gst" v-if="detail.hitch.remark">故障内容：{{detail.hitch.remark}}</view>
			<view class="gst">故障图片：</view>
			<view class="gallery" v-if="detail.hitch.picUrlList.length>0">
				<image :key="idx" @tap="preview($event, idx, detail.hitch.picUrlList)" webp show-menu-by-longpress lazy-load
				v-for="(img, idx) in detail.hitch.picUrlList" :src="img" mode="aspectFill" />
			</view>
		</view>
		
		<view v-if="detail.allocate.staff" class="card" style="line-height: 1.5em;">
			<view class="gst">维保人员：{{detail.allocate.staff.name}}</view>
			<view class="gst">联系电话：{{detail.allocate.staff.phone}}</view>
		</view>
		
		<view v-if="detail.result && detail.result.remark" class="card" style="line-height: 1.5em;">
			<view class="gst">服务内容：{{detail.result.remark}}</view>
			<view class="gst">现场照片：</view>
			<view class="gallery" v-if="detail.result.picUrlList.length>0">
				<image :key="idx" @tap="preview($event, idx, detail.result.picUrlList)" webp show-menu-by-longpress lazy-load
				v-for="(img, idx) in detail.result.picUrlList" :src="img" mode="aspectFill" />
			</view>
		</view>
		
		<view style="margin-bottom: 100rpx;"></view>
		
		<view class="bottom horizontal">
			<button style="color: white;background-color: var(--color-ok);" class="capsule scale" v-if="detail.status==5" @tap="rate">评价</button>
		</view>
	</view>
</template>

<script>
	import {statuses, sources, types, users} from '../../static/constants.js'
	
	const app = getApp()
	export default {
		components: {
			
		},
		onShow() {
			
		},
		onLoad(opt) {
			uni.showLoading({
				title:'加载中...',
			})
			if (opt.id) {
				this.post.id = opt.id
				// 获取对应id下的工单详情
				uni.request({
					header: {
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.curl + 'workOrder/detail/' + opt.id,
					method: 'GET',
					data: {},
					success: res => {
						uni.hideLoading()
						const {data} = res
						console.log(data)
						if (data.code == 200) {
							this.detail = data.data
						} else if (data.code == 500) {
							uni.showToast({
								icon: 'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {
						console.error(err)
					},
				});
			}
		},
		data() {
			return {
				post:{
					id: '',
					star: 0,
				},
				types,
				statuses,
				sources,
				detail:{
					id: '', 								// 工单ID
					no: "", 								// 工单编号
					type: '', 								// 工单类型 ： 1-开通2-报修3-报停4-恢复 5-机房巡检 6 更换滤芯
					status: '', 							// 状态: 1/2- 待接单 3-已接单 4-待评价 5 已评价 
					source:'', 							//来源 1-是民小程序2-管理员创建
					applyTime: "", 							// 申请时间
					visitDate: "",							// 上门时间
					visitStartTime:"",					// 上门开始时间
					visitEndTime: "",						// 上门结束时间
					userName:'',						// 联系人
					phone: '',							// 联系电话
					"WorkOrderVerifyDetailVo": {
					   "verifyId": 1, // 审核id
					    "verifyStatus": 1  , 		// 审核状态 1-待审核 2-审核通过 3-审核拒绝
					},
					remrak:'',								// 报停原因
					// 户主信息
					userVo: { 
						name: "", 							// 户主名称
						phone: "", 							// 户主手机号
						address: { 							// 户主地址
							streetId: '',
							streetAddress: {
								provinceId: '',
								provinceName: "", 			// 省
								cityId: '',
								cityName: "", 				//市
								regionId: '',
								regionName: "", 			// 区
								streetId: '',
								streetName: "" 				// 街道
							},
							courtAddress: "", 				//  小区详情地址
							courtName: "", 					// 小区名称
							buildingNo: '', 				// 楼宇号
							buildingName: '',				// 楼宇别称
							roomUnit: '', 					// 单元
							roomNo: '' 						// 房间号
						}
					},
					// 维保信息
					"allocate": {
						"acceptTime": "", 					//维保接单时间
						"finishTime": "", 					// 维保完成时间
						"allocateTime": "", 				//维保派单时间
						"status": '', 						//1-待接单 2-工作中 3-已完成
						"staff": {
							"name": "", 					// 维保人员名称
							"idCard": "", 					//维保身份证号
							"phone": "" 					//维保人员联系方式
						}
					},
					// 故障信息 只有type 为保修 才会存在
					"hitch": {
						"type": '', 						// 故障类型
						"remark": "", 						// 描述(故障内容)
						"picUrlList": [] 					// 故障图片
					},
					// 服务内容 
					"result": {
						"remark": "", 						// 服务内容
						"picUrlList": [], 					// 服务图片
						"star": '' 							// 星级评级
					}
				}
			}
		},
		filters:{
			addr(address){
				const {streetAddress} = address
				return `${streetAddress.provinceName}${streetAddress.cityName}${streetAddress.regionName}
				${streetAddress.streetName}${address.courtName}${address.buildingName || address.buildingNo}${address.roomUnit}单元${address.roomNo}`
			}
		},
		methods: {
			changeRate(evt){
				const rate = evt.value
				this.post.star=rate
			},
			rate(){
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.curl + 'workOrder/eval',
					method: 'POST',
					data: {
						...this.post,
					},
					success: res => {
						const {data} = res
						if(data.code==200){
							uni.showModal({
								title: '评价',
								content: '评价成功，非常感谢您的参与！',
								showCancel: false,
								success: res => {
									if(res.confirm){
										// 转入已完成工单
										uni.redirectTo({
											url:'../progress/progress?status=3'
										})
									}
								}
							});
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			preview(evt, idx, urls) {
				console.log(idx)
				uni.previewImage({
					current: idx,
					urls,
					loop: true,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
					}
				})
			},
		}
	}
</script>

<style scoped>
	textarea {
		margin: 0 20rpx;
		background-color: white;
		border-radius: 15rpx;
		width: 700rpx;
		min-height: 200rpx;
		padding: 10rpx;
	}

	.gallery {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: 
	}

	.gallery>image {
		width: 200rpx;
		height: 200rpx;
		flex-grow: 0;
		flex-shrink: 0;
		margin: 10rpx;
	}
</style>
